<template>
    <el-menu
            mode="vertical"
            style="height: 100%; border: 0;"
            default-active="/Home"
            :collapse="isCollapse"
            :collapse-transition="false"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409EFF"
            router
            unique-opened
    >
       <el-menu-item index="/Home">
           <i class="el-icon-s-home"></i>
           <span slot="title">首页</span>
       </el-menu-item>
        <el-submenu v-for="(item,i) in firstLevelMenus" :key="'firstLevelMenus_item_'+i" :index="'submenu_' + item.id"> 
            <template slot="title">
                <i :class="item.menuicon" ></i>
                <span slot="title">{{item.menuname}}</span>
            </template>
            <el-menu-item :index="'/'+subItem.menuclick" v-for="(subItem,i) in getSubItems(item.menucode)" :key="'subItem_'+i" >
                <span slot="title">{{subItem.menuname}}</span>
                <!-- <span>{{subItem.menucomponent}}</span> -->
            </el-menu-item>
        </el-submenu>
        <el-menu-item :index="'/'+item.menuclick" v-for="(item,i) in menu" :key="i" >
            <i :class="item.menuicon" v-if="item.menulevel=='2'"></i>
            <span slot="title" v-if="item.menulevel=='2'">{{item.menuname}}</span>
        </el-menu-item>
    </el-menu>
</template>

<script>
    export default {
        name: "Aside",
        data(){
            return {
                //isCollapse:false

               /* menu:[
                    {
                        menuClick:'Admin',
                        menuName:'管路员管理',
                        menuIcon:'el-icon-s-custom'
                    },{
                        menuClick:'User',
                        menuName:'用户管理',
                        menuIcon:'el-icon-user-solid'
                    }
                ]*/
            }
        },
        computed:{
            "menu":{
                get(){
                    return this.$store.state.menu.filter(item => item.menulevel === '2');
                }
            },
            "firstLevelMenus": {
                get(){
                    return this.$store.state.menu.filter(item => item.menulevel === '1' && item.menuparentcode === null);
                }
            }
        },
        methods:{
            getSubItems(parentCode) {
            // 根据父菜单代码获取二级菜单项
                return this.$store.state.menu.filter(item => item.menuparentcode === parentCode);
                
            }
        },
        props:{
            isCollapse:Boolean
        }
    }
</script>

<style scoped>

</style>